<template>
  <div class="home-layout-aside">
    <el-menu class="el-menu-vertical-demo" background-color="transparent" text-color="#CFD3DC" v-bind:router="true" v-bind:default-active="menuActive">
      <template v-for="(parentItem, parentIndex) in menuItems" v-bind:key="parentIndex">
        <el-sub-menu v-if="parentItem.children && parentItem.children.length !== 0" v-bind:index="parentItem.path">
          <template #title>
            <el-icon>
              <component v-bind:is="parentItem.icon"/>
            </el-icon>
            <span>{{ parentItem.label }}</span>
          </template>
          <el-menu-item v-for="(childItem, childIndex) in parentItem.children" v-bind:key="childIndex" v-bind:index="childItem.path">
            <template #title>
              <el-icon>
                <component v-bind:is="childItem.icon"/>
              </el-icon>
              <span>{{ childItem.label }}</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else v-bind:index="parentItem.path">
          <template #title>
            <el-icon>
              <component v-bind:is="parentItem.icon"/>
            </el-icon>
            <span>{{ parentItem.label }}</span>
          </template>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
  <el-scrollbar class="home-layout-main">
    <router-view/>
  </el-scrollbar>
</template>

<script>
import LayoutHeader from "@/components/base-layout-header.vue";

export default {
  components: {LayoutHeader},
  data() {
    return {
      menuActive: "/home/index",
      menuItems: [
        {label: "工作面板", path: "/home/index", icon: "Monitor", children: []},
        {
          label: "组件展示", path: "/component", icon: "Grid",
          children: [
            {label: "按钮元素", path: "/component/button-example", icon: "Menu", children: []},
            {label: "表单元素", path: "/component/form-example", icon: "List", children: []},
            {label: "徽章角标", path: "/component/badge-example", icon: "Ticket", children: []},
            {label: "卡片列表", path: "/component/card-example", icon: "CopyDocument", children: []},
            {label: "轮播滚动", path: "/component/carousel-example", icon: "Notification", children: []},
            {label: "骨架占位", path: "/component/skeleton-example", icon: "Operation", children: []},
            {label: "对话弹框", path: "/component/dialog-example", icon: "MuteNotification", children: []},
          ]
        },
      ]
    }
  }
}
</script>

<style scoped>
.home-layout-aside {
  background-color: #1A1A1A;
  width: 200px;
  border-top-left-radius: 10px;
}

.home-layout-aside .el-menu {
  border-right: 0;
}

.home-layout-main {
  flex: 1;
  height: 100%;
  background-color: #121212;
  padding: 10px;
}
</style>